"use client";

import { memo, useCallback } from "react";
import type { ReactNode, FC } from "react";
import styles from "./style.module.scss";
import { getImgOnSize } from "@/utils/format";
import { useAppDispatch } from "@/store/hooks";
import { fetchSongDetail } from "@/components/player/store/player";
interface IProps {
  children?: ReactNode;
  item: any;
}

interface Track {
  id: number;
  name: string;
}

const TopRankingItem: FC<IProps> = (props) => {
  const { item } = props;
  const dispatch = useAppDispatch();
  // 切换目前的歌曲
  const handlePlayClick = useCallback((id: number) => {
    dispatch(fetchSongDetail(id));
  }, []);
  return (
    <div className={styles.rankingItemWrapper}>
      <div className={styles.rankTop}>
        <div className={styles.img}>
          <img src={getImgOnSize(item.coverImgUrl, 80)} />
          <a className="sprite_cover"></a>
        </div>
        <div className={styles.detail}>
          <a>
            <h3>{item.name}</h3>
          </a>
          <div className={styles.icon}>
            <a className={`sprite_02 ${styles.fA}`}></a>
            <a className={`sprite_02 ${styles.sA}`}></a>
          </div>
        </div>
      </div>
      {/* 榜单列表 */}
      <div className={styles.list}>
        {item.tracks.slice(0, 10).map((track: Track, index: number) => {
          return (
            <div className={styles.track} key={index}>
              <span>{index + 1}</span>
              <a>{track.name}</a>
              <div className={styles.oper}>
                <a
                  className={`sprite_02 ${styles.play}`}
                  title="播放"
                  onClick={() => handlePlayClick(track.id)}
                ></a>
                <a
                  className={`icons ${styles.addList}`}
                  title="添加到播放列表"
                ></a>
                <a className={`sprite_02 ${styles.favorite}`} title=""></a>
              </div>
            </div>
          );
        })}
      </div>
      <div className={styles.more}>
        <a>查看更多{">"}</a>
      </div>
    </div>
  );
};

export default memo(TopRankingItem);
